<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.partSetting.CategoryProperty')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="600"
      :width="1000"
    >
      <Table :columns="columns" :data-source="dataSource" bordered row-key="prop">
        <template v-for="col in ['isSelect', 'isOnly']" #[col]="{ text, record }" :key="col">
          <div>
            <Checkbox
              v-if="editableData[record.prop]"
              v-model:checked="editableData[record.prop][col]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text === '1' || text === true ? t('common.yes') : t('common.no') }}
            </template>
          </div>
        </template>
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span v-if="editableData[record.prop]">
              <a @click="save(record.prop)">{{ t('common.saveText') }}</a>
              <Popconfirm :title="t('common.confirmCancelText')" @confirm="cancel(record.prop)">
                <a>{{ t('common.cancelText') }}</a>
              </Popconfirm>
            </span>
            <span v-else>
              <a @click="edit(record.prop)">{{ t('common.edit') }}</a>
            </span>
          </div>
        </template>
      </Table>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Checkbox, Popconfirm, Table } from 'ant-design-vue';
  import { getPartClassPropertyList, updatePartClassPropertyList } from '/@/api/demo/system';

  const { t } = useI18n();
  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();
  const PartId = ref('');
  const editableData = ref({});
  const dataSource = ref([]);
  const columns = ref([
    {
      title: t('routes.demo.partSetting.code'),
      dataIndex: 'prop',
      width: 150,
      fixed: 'left',
    },
    {
      title: t('routes.demo.partSetting.name'),
      dataIndex: 'name',
      width: 120,
    },
    {
      title: t('routes.demo.partSetting.selectProperty'),
      dataIndex: 'isSelect',
      width: 120,
      slots: { customRender: 'isSelect' },
    },
    {
      title: t('routes.demo.partSetting.selectSensitiveProperty'),
      dataIndex: 'isOnly',
      width: 120,
      slots: { customRender: 'isOnly' },
    },
    {
      title: t('routes.demo.partSetting.isSystemCategoryProperty'),
      dataIndex: 'isSystem',
      width: 120,
      slots: { customRender: 'isSystem' },
    },
    {
      title: t('common.action'),
      dataIndex: 'operation',
      width: 120,
      slots: { customRender: 'operation' },
    },
  ]);

  // 定义弹窗是否可见
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    PartId.value = data.partid;
    getPartClassPropertyList(data.partid).then((res) => {
      dataSource.value = res;
      dataSource.value.forEach((item) => {
        if (item.isSelect === '1') {
          item.isSelect = true;
        } else if (item.isSelect === '0') {
          item.isSelect = false;
        }
        if (item.isOnly === '1') {
          item.isOnly = true;
        } else if (item.isOnly === '0') {
          item.isOnly = false;
        }
      });
    });
  });

  async function handleSubmit() {
    let isHaveOnly = dataSource.value.every((item) => item.isOnly === false);
    if (isHaveOnly) {
      createMessage.warning(t('routes.table.formManagement.sensitivePropertyAtLeastOne'));
    } else {
      dataSource.value.forEach((item) => {
        if (item.isSelect === true) {
          item.isSelect = '1';
        } else if (item.isSelect === false) {
          item.isSelect = '0';
        }
        if (item.isOnly === true) {
          item.isOnly = '1';
        } else if (item.isOnly === false) {
          item.isOnly = '0';
        }
      });
      updatePartClassPropertyList(PartId.value, dataSource.value).then((res) => {
        if (res) {
          createMessage.success(t('common.saveSuccess'));
          handleCancel();
        }
      });
    }
  }

  const handleCancel = () => {
    PartId.value = '';
    dataSource.value = [];
    editableData.value = {};
    closeModal();
  };

  const edit = (key: string) => {
    editableData.value[key] = cloneDeep(dataSource.value.filter((item) => key === item.prop)[0]);
  };
  const save = (key: string) => {
    Object.assign(dataSource.value.filter((item) => key === item.prop)[0], editableData.value[key]);
    delete editableData.value[key];
  };
  const cancel = (key: string) => {
    delete editableData.value[key];
  };
</script>

<style lang="less" scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }

  ::v-deep(.ant-table-body) {
    height: 550px !important;
  }
</style>
